<template>
	<div id="auth_3">
		<div class="top-wrapper">
			<span class="icon"> <i class="el-icon-s-fold"></i> </span>
			<div class="router-wrapper">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }"
						>首页</el-breadcrumb-item
					>
					<el-breadcrumb-item
						><a href="/">活动管理</a></el-breadcrumb-item
					>
					<el-breadcrumb-item>活动列表</el-breadcrumb-item>
					<el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>

		<div class="main-wrapper">
			<div class="tip-wrapper">
				<span> <i class="el-icon-tickets"></i> 数据列表</span>
				<span class="btn">添加</span>
			</div>

			<div class="table-wrapper">
				<el-table
					:data="emuns"
					border
					style="width: 100%"
					header-align="center"
				>
					<el-table-column
						align="center"
						fixed
						prop="id"
						label="编号"
						width="50"
					>
					</el-table-column>
					<el-table-column
						align="center"
						prop="title"
						label="菜单名称"
						width="130"
					>
					</el-table-column>

					<el-table-column
						align="center"
						prop="level"
						label="菜单级数"
						width="100"
					>
					</el-table-column>

					<el-table-column
						align="center"
						prop="name"
						label="前端名称"
						width="150"
					>
					</el-table-column>

					<el-table-column
						align="center"
						label="前端图标"
						width="100"
					>
						<template slot-scope="scope">
							<i :class="scope.row.icon" class="icon"></i>
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						label="是否显示"
						width="120"
					>
						<template slot-scope="scope">
							<el-switch
								v-model="scope.row.hidden"
								active-color="#13ce66"
								inactive-color="#ff4949"
							>
							</el-switch>
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						prop="sort"
						label="排序"
						width="80"
					>
					</el-table-column>

					<el-table-column
						align="center"
						prop="name"
						label="设置"
						width="150"
					>
						<template slot-scope="scope">
							<el-link type="primary">查看下级</el-link>
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						fixed="right"
						label="操作"
						width="130"
					>
						<template slot-scope="scope">
							<el-button type="text" size="small">编辑</el-button>
							<el-button type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="page-wrapper">
					<el-pagination
						:current-page="currentPage"
						:page-sizes="[100, 200, 300, 400]"
						:page-size="100"
						layout="total, sizes, prev, pager, next, jumper"
						:total="400"
						small
					>
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import authApi from '@/api/auth'
export default {
	name: 'auth_3',
	data() {
		return {
			currentPage: 1,
			emuns: [],
		}
	},
	methods: {},
	mounted() {
		authApi.getMenuAll().then((res) => {
			this.emuns = res.response
		})
	},
	components: {},
}
</script>

<style scoped lang="less">
#auth_3 {
	.top-wrapper {
		display: flex;
		height: 30px;
		align-items: center;
		border-bottom: 1px solid #e4e7ed;
		.icon {
			margin: 0 8px;
		}
	}
	.main-wrapper {
		margin: 20px;

		.tip-wrapper {
			border: 1px solid #e4e7ed;
			border-radius: 5px;
			display: flex;
			height: 35px;
			margin: 20px 0;
			align-items: center;
			justify-content: space-between;
			padding: 10px 15px;
			font-size: 14px;
			.btn {
				border: 1px solid #e4e7ed;
				font-size: 12px;
				padding: 5px 10px;
				border-radius: 5px;
				cursor: pointer;
			}
		}

		.table-wrapper {
			.icon {
				font-size: 20px;
			}
			.page-wrapper {
				width: 100%;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
}
</style>
